<template>
  <div>
    <!-- 1.导航列表 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashBook' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学员信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>班级管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 10px;">
      <!-- 2.模糊查询 使用el-form 收集用户输入的值,作为查询条件
      inline  水平方向的表单
       @keyup.enter.native 按钮回车键触发查询函数:getClassList
       输入框文本内容清空后,需要重新查询一遍,调用查询函数:getClassList
       clearable 清空,
       需要重新查询一遍 @clear
      -->
      <el-form :model="queryMap" :inline="true" size="small" style="margin: 10px 0px;">
        <el-form-item label="班级名称:">
          <el-input type="text" v-model="queryMap.classname" placeholder="请输入要查询的班级名称"
                    @keyup.enter.native="getClassList" clearable @clear="getClassList"></el-input>
        </el-form-item>
        <el-form-item label="班级状态:">
          <el-select v-model="queryMap.clsstatus" @visible-change="getClassList" clearable @clear="getClassList"
                     placeholder="请选择不同的状态进行查询">
            <el-option label="全部" value=" "></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="已合班" value="2"></el-option>
            <el-option label="已就业" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el-icon-refresh" @click="getClassList" plain>查询</el-button>
          <el-button type="info" class="el-icon-delete" plain @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 15px;">
        <el-button type="success" size="mini" class="el-icon-add-location" @click="showAddOrUpdateDialog" plain>新增</el-button>
        <el-button type="primary" size="mini" class="el-icon-upload2" >导入excel</el-button>
        <el-button size="mini" class="el-icon-download" plain>导出excel</el-button>
        <el-button type="danger" size="mini" class="el-icon-delete" plain>批量删除</el-button>
      </div>
      <!-- 3. 表格 :列表 -->
      <el-table size="small" :data="classList" border stripe style="width: 100%;"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="classid" label="班级编号" width="80"></el-table-column> <!-- 一列一列 -->
        <el-table-column prop="classname" label="班级名称" width="100"></el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" style="margin-right: 10px;"></i>
            <span>{{scope.row.createtime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="master" label="班主任" width="100"></el-table-column>
        <el-table-column prop="instname" label="教员" width="100"></el-table-column>
        <el-table-column prop="guidename" label="就业老师" width="100"></el-table-column>
        <el-table-column label="班级状态" width="120">remarks
          <template slot-scope="scope">
            <span>{{changeStatus(scope.row.clsstatus)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="260">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>备注:{{scope.row.remarks}}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{scope.row.remarks}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="success" class="el-icon-edit" @click="editShowDialog(scope.row.classid)">编辑</el-button>
            <el-button size="mini" type="danger" class="el-icon-delete" @click="deleteClassById(scope.row.classid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 4. 分页 -->
      <el-pagination
        style="margin-top: 15px;"
        background
        :current-page="queryMap.pageNum"
        :page-size="queryMap.pageSize"
        :page-sizes="[5,10,20,30]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changePageNum"
      ></el-pagination>
      <!-- 5. 新增和编辑 -->
      <el-dialog :title="addOrUpdateDialog" :visible.sync="dialogVisibleShow">
      <span>
        <!--   label-width 是输入框,下拉框前面文字标题的 宽度   -->
        <el-form :model="addOrUpdateForm" size="small" label-width="100px" :rules="addOrUpdateFormRules" ref="addOrUpdateForm">
           <el-row>
                <el-col :span="11">
                   <el-form-item label="班级名称:" prop="classname">
                      <el-input type="text" v-model="addOrUpdateForm.classname" placeholder="请输入班级名称" clearable></el-input>
                   </el-form-item>
                </el-col>
                <el-col :span="11">
                   <el-form-item label="创建时间:" prop="createtime">
                      <el-date-picker v-model="addOrUpdateForm.createtime"
                                      type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择对应的时间"></el-date-picker>
                   </el-form-item>
                </el-col>
           </el-row>

          <el-row>
                <el-col :span="11">
                   <el-form-item label="班主任:">
                      <el-select v-model="addOrUpdateForm.headmaster"  placeholder="请选择班主任" clearable>
                        <el-option v-for="emp in empList" :value="emp.empid" :key="emp.empid" :label="emp.empname"></el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
                <el-col :span="11">
                   <el-form-item label="教员:">
                      <!--  key 是循环中的唯一标识 主键   -->
                      <el-select v-model="addOrUpdateForm.instructor"  placeholder="请选择教员" clearable>
                        <el-option v-for="emp in empList" :value="emp.empid" :key="emp.empid" :label="emp.empname"></el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
           </el-row>
          <el-row>
                <el-col :span="11">
                   <el-form-item label="就业老师:">
                      <el-select v-model="addOrUpdateForm.employmentguide"  placeholder="请选择就业老师" clearable>
                        <el-option v-for="emp in empList" :value="emp.empid" :key="emp.empid" :label="emp.empname"></el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
                <el-col :span="11">
                   <el-form-item label="班级状态:">
                      <!--  key 是循环中的唯一标识 主键   -->
                      <el-select v-model="addOrUpdateForm.clsstatus"  placeholder="请选择状态" clearable>
                        <el-option v-for="sts in statusList" :value="sts.clsid" :key="sts.clsid" :label="sts.clsStatus"></el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
           </el-row>
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="addOrUpdateForm.remarks" placeholder="请输入备注信息" clearable style="width: 80%"></el-input>
          </el-form-item>

        </el-form>
      </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" plain class="el-icon-circle-close" >取消</el-button>
          <el-button type="success" plain class="el-icon-edit-outline" @click="saveClassInfo('addOrUpdateForm')">保存</el-button>
      </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "ClassManage",
  data(){
    return {
      addOrUpdateFormRules: {
        classname: [
          {required: true ,message: "请填写班级名称", trigger: 'blur'},
          {min: 2, max: 20, message: "请输入长度为2-20位字符", trigger: 'blur'}
        ],
        createtime: [
          {required: true ,message: "请选择时间", trigger: 'blur'},
        ]
      },
      statusList:[{clsid:1,clsStatus:"正常"},{clsid:2,clsStatus:"已合班"},{clsid:3,clsStatus:"已就业"}],
      empList:[], // 部门员工信息列表
      addOrUpdateDialog: '新增班级信息', // 对话框的标题
      dialogVisibleShow: false,  //控制对话框 弹出或者隐藏的效果
      addOrUpdateForm:{
        classid: '',
        classname: '',
        createtime: '',
        headmaster: '',
        instructor: '',
        employmentguide: "",
        clsstatus: '',
        remarks: ''
      }, //表单收集对象
      total: 0,
      classList: [],
      queryMap: {
        pageNum: 1,  // 页码数
        pageSize: 5, // 每页显示多少条
        classname: '',
        clsstatus: ''
      }
    }
  },
  /**
   * 当element 元素标签挂载到浏览器,去调用vue生命周期mounted函数
   */
  mounted() {
    //调用后台  查询数据库表:c_class  获取班级列表数据
    this.getClassList();
    // 获取 部门人员信息  表: c_employee 部门信息表

    this.getEmpList();
  },
  methods:{
    async deleteClassById(classid){
      const con = await this.$confirm("此操作将永久删除改班级信息,是否继续","提示",{
        confirmButtonText : "确定",
        cancelButtonText : "取消",
        type: 'warning'
      }).catch(() =>{
        this.$message.info("已取消")
      })
      if(con === "confirm"){
        const {data: res} = await this.$http.delete('/class/delete/'+classid)
        if(res.success){
          // 1.保存成功提示
          this.$notify({
            title: "操作成功",
            message: "班级信息更新成功",
            type: "success"
          })
          // 2.重新加载列表
          this.getClassList()
        }else{
          this.$message.error("班级信息保存失败:",res.data.errorMsg)
        }
      }
    },
    editShowDialog(classid){
      // 清空历史填写记录
      this.addOrUpdateForm = {}
      // 清空校验的提示信息
      // this.$refs['addOrUpdateForm'].clearValidate();
      this.addOrUpdateDialog = '修改班级信息'
      // 弹出对话框
      this.dialogVisibleShow = true;
      // 查询 当前这一行的数据
      this.$http.get('/class/edit/'+classid).then(res =>{
        if(res.data.success){
          this.addOrUpdateForm = res.data.data
        }else{
          this.$message.error("查无此数据!")
        }
      })
    },
    saveClassInfo(form){
      this.$refs[form].validate(valid =>{
        if(valid){
          if(this.addOrUpdateForm.classid){ // 如果 addOrUpdateForm对象里面classid有值,是不是走更新
            this.updateClassById()
          }else{
            //保存数据到表里:c_class
            this.saveClass()//保存数据
          }
        }else{
          this.$message.error("必填项不能为空,请重新输入!")
        }
      })
    },
    updateClassById(){
      this.$http.put('/class/update/'+this.addOrUpdateForm.classid,this.addOrUpdateForm).then(res =>{
        if(res.data.success){
          // 1.保存成功提示
          this.$notify({
            title: "操作成功",
            message: "班级信息更新成功",
            type: "success"
          })
          // 2.关闭对话框
          this.dialogVisibleShow = false
          // 3.重新加载列表
          this.getClassList()
        }else{
          this.$message.error("班级信息保存失败:",res.data.errorMsg)
        }
      })
    },
    saveClass(){
      this.$http.post('/class/add',this.addOrUpdateForm).then(res =>{
        if(res.data.success){
          // 1.保存成功提示
          this.$notify({
            title: "操作成功",
            message: "班级信息添加",
            type: "success"
          })
          // 2.关闭对话框
          this.dialogVisibleShow = false
          // 3.重新加载列表
          this.getClassList()
        }else{
          this.$message.error("班级信息保存失败:",res.data.errorMsg)
        }
      })
    },
    getEmpList(){
      this.$http.get('/emp/getEmpNameList').then(res =>{
        if(res.data.success){
          this.empList = res.data.data
        }else{
          this.$message.error("员工信息表-查无此数据",res.data.errorMsg)
        }
      })
    },
    // 点击新增按钮触发改方法
    showAddOrUpdateDialog(){
      // 1. 清除填写的记录
      this.addOrUpdateForm = {};
      // 2.清除历史校验的提示信息

      // 3.弹出对话框 dialog
      this.dialogVisibleShow = true;
    },
    resetForm(){
      // 重置按钮操作就是将  查询框里面的内容清空
      this.queryMap.classname = ""
      this.queryMap.clsstatus = ""
      // 重置完了,需要重新查询一遍数据
      this.getClassList()
    },
    changePageSize(newPageSize){ // 切换每页显示多少多少条的操作方法
      this.queryMap.pageSize = newPageSize
      this.getClassList();
    },
    changePageNum(newPageNum){ // 点击不同页码数调用函数(操作方法)
      this.queryMap.pageNum = newPageNum
      this.getClassList()
    },
    async getClassList(){
      const {data : res} = await this.$http.get('/class/findList',{params: this.queryMap})
      if(res.success){ // 发起http  get请求,成功响应返回数据
        console.log(res)
        this.classList = res.data.rows;
        this.total = res.data.total;
      }else{
        this.$message.error("查无此数据!",res.errorMsg)
      }
    },
    changeStatus(classStatus) {
      if(classStatus === 1){
        return "正常";
      }else if(classStatus === 2){
        return "已合班";
      }else{
        return "已就业";
      }
    }
  }
}
</script>

<style scoped>

</style>
